<template>
    <div>
        <n-button type="primary">按钮</n-button>
        <n-select :options="options" style="width: 200px" :renderLabel="renderLabel"></n-select>
        <!-- <ForceGraph /> -->
    </div>
</template>
<script setup>
import { ref, h } from 'vue'
import { NEllipsis } from 'naive-ui'
import ForceGraph from '@/components/ForceGraph/index.vue'

const listWorker = new Worker(new URL('./list.worker.js?worker', import.meta.url), {
    type: 'module',
})

const options = [
    { value: 1, label: '下拉选项下拉选项下拉选项下拉选项下拉选项下拉选项下拉选项下拉选项下拉选项' },
]

const activeTab = ref(2)
const tabs = [
    { value: 1, label: '标签一' },
    { value: 2, label: '标签二' },
    { value: 3, label: '标签三' },
    { value: 4, label: '标签四' },
    { value: 5, label: '标签五' },
]

listWorker.postMessage({
    a: 1,
})

const renderLabel = (option) => {
    return h(NEllipsis, option.label)
}

listWorker.onmessage = (e) => {
    console.log(new Date())
}

console.log(new Date())
</script>
<style lang="less" scoped>
.tabs {
    margin-top: 20px;
    display: flex;
    align-items: center;
    padding-top: 12px;
    &-item {
        line-height: 44px;
        padding: 0 24px;
        cursor: pointer;
        &.active {
            border-bottom: none;
            border-radius: 20px 20px 0 0;
            position: relative;
            background: #fff;
            &::after {
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                background-color: var(--primary-color);
                bottom: 0;
                box-shadow: 3px 3px 0px 3px #fff;
                left: -20px;
                border-bottom-right-radius: 100px;
            }
            &::before {
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                background-color: var(--primary-color);
                bottom: 0;
                box-shadow: -3px 3px 0px 3px #fff;
                right: -20px;
                border-bottom-left-radius: 100px;
            }
        }
    }
}

.tip-title {
    position: relative;
    &::after {
        content: attr(data-title);
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        color: #fff;
        background: #666;
        padding: 4px 12px;
        border-radius: 2px;
        display: none;
    }
    &::before {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 12px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-bottom-color: #666;
        display: none;
    }
    &:hover::after,
    &:hover::before {
        display: block;
    }
}
</style>
